<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>专家成果管理</span>
      </div>
    </template>
    
    <div class="search-form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.Title" placeholder="请输入题名" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.Author" placeholder="请输入作者" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="checkAchievements" placeholder="请选择成果库" clearable multiple collapse-tags-tooltip @change="achievementsChange">
            <el-option label="期刊" value="CJFD" />
            <el-option label="博士" value="CDFD" />
            <el-option label="硕士" value="CMFD" />
            <el-option label="中国会议" value="CPFD" />
            <el-option label="国际会议" value="IPFD" />
            <el-option label="报纸" value="CCND" />
            <el-option label="中国专利" value="SCPD" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="dialogFormVisible = true">新建</el-button>
      </div>
    </div>

    <div class="table-data" v-loading="loading">
      <el-table
        :data="expertAchievementsData"
        stripe
        borderresizable
        highlight-hover-row
        show-overflow
        keep-source
        scrollbar-always-on
      >
        <el-table-column
          v-for="(tableItem, tableIndex) in expertAchievementsTableColumns" :key="tableIndex"
          :prop="tableItem.field"
          :label="tableItem.label"
          :min-width="tableItem.minWidth"
          :formatter="tableItem.formatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          fixed="right"
          field="opera"
          label="操作"
          min-width="120"
        >
          <template #default="{ row }">
            <el-button
              type="warning"
              link
              @click="expertAchievementsDetail(row)"
            >查看</el-button>
            <el-button
              type="success"
              link
              @click="expertAchievementsEdit(row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-page">
        <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
      </div>
    </div>

    <el-dialog title="请先选择创建内容所属的成果库" v-model="dialogFormVisible">
      <el-form label-width="100px" :model="achievementForm" ref="achievementFormRef" :rules="achievementRules">
        <el-form-item label="成果库" prop="checkAchievement" >
          <el-select v-model="achievementForm.checkAchievement" placeholder="请选择成果库" clearable style="width: 100%;">
            <el-option label="期刊" value="CJFD" />
            <el-option label="博士" value="CDFD" />
            <el-option label="硕士" value="CMFD" />
            <el-option label="中国会议" value="CPFD" />
            <el-option label="国际会议" value="IPFD" />
            <el-option label="报纸" value="CCND" />
            <el-option label="中国专利" value="SCPD" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addExpertAchievements">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
export default { name: "backendExpertAchievements" }
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http/index';
import { dateFormatter, checkStatusFormatter } from "@/utils/backend.js"
import { useAuthStore } from '@/stores/modules/auth.js';

/* 路由 */
const route = useRouter();

const authStore = useAuthStore()

onMounted(() => {
  onSubmit()
})

/* 搜索表单 */
const formInline = ref({
  Title: "",
  Author: "",
})
const checkAchievements = ref(["CJFD"])
const achievementsChange = (val) => {
  onSubmit()
}

/* 分页 */
const dataTotal = ref(0)
const pageSize = ref(15)
const currentPage = ref(1)

if(route.currentRoute.value.query.currentPage) {
  currentPage.value = Number(route.currentRoute.value.query.currentPage)
}

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

/* 表格数据加载动画 */
const loading = ref(false)

/* 表格数据 */
const expertAchievementsData = ref([])

/* 表格字段 */
const expertAchievementsTableColumns = reactive([
  { field: "title", label: "题名", minWidth: "250" },
  { field: "author", label: "作者", minWidth: "160" },
  { field: "theme", label: "主题", minWidth: "120" },
  { field: "sourceDatabase", label: "类型", minWidth: "120" },
  { field: "pubDate", label: "发布日期", minWidth: "120", formatter: dateFormatter },
  { field: "year", label: "年份", minWidth: "120" },
])

/* 列表筛选 */
const onSubmit = () => {
  if(!checkAchievements.value.length) return ElMessage.warning("请至少选择一个成果库进行查询")
  loading.value = true

  const queryParams = {
    achievementsCodeArr: checkAchievements.value,
    theoryStudyGetListAndPageInfoInput: {
      pageIndex: currentPage.value,
      pageSize: pageSize.value,
      authToken: authStore.auth_token,
      orderbyCol: "Year",
      dfi: {},
    },
  }

  let dfi = {
    Logic: 0,
    filters: []
  }

  for (let k in formInline.value){
    if(formInline.value[k]){
      dfi.filters.push({
        Field: k,
        Operator: 0,
        Value: formInline.value[k]
      })
    }
  }

  if(dfi.filters.length){
    queryParams.theoryStudyGetListAndPageInfoInput.dfi = dfi
  }
  http.$POST("/AchievementsM/GetAchievementsInfoList", queryParams).then(res => {
    loading.value = false
    if (res.isError) return
    expertAchievementsData.value = res.result.dataLst
    dataTotal.value = res.result.countAll
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败，请重试")
  })
}

/* 选库弹窗 */
const dialogFormVisible = ref(false)
const achievementFormRef = ref(null)
const achievementForm = ref({
  checkAchievement: ""
})
const achievementRules = ref({
  checkAchievement: [
    { required: true, message: '请选择成果库', trigger: 'change' },
  ],
})
/* 新建 */
const addExpertAchievements = () => {
  achievementFormRef.value.validate((valid, fields) => {
    if(valid) {
      route.push({
        path: "/backend/expert-achievements/add",
        query: { type: 'add', checkAchievement: achievementForm.value.checkAchievement }
      })
    }else {
      ElMessage.warning("请先选择成果库")
    }
  })
}

/* 编辑 */
const expertAchievementsEdit = (row) => {
  route.push({
    path: "/backend/expert-achievements/add",
    query: { id: row.id, checkAchievement: row.tableName, type: 'edit', currentPage: currentPage.value }
  })
}

/* 查看 */
const expertAchievementsDetail = (row) => {
  let { href } = route.resolve({
    path: "/backend/expert-achievements/detail",
    query: { id: row.id, currentPage: currentPage.value }
  })
  window.open(href, "_blank")
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>